<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getUserEvaluateService } from '@/apis/evaluate'
import { useUserStore } from '@/stores'
import { formatTime } from '@/utils/formatTime.js'

const UserStore = useUserStore()

// 用户评价信息列表
const evaluateList = ref([])

// 获取用户评价信息
const getUserEvaluate = async () => {
	const res = await getUserEvaluateService(UserStore.UserInfoList.user_id)
	// 格式化发布时间
	res.data?.map((item) => (item.createdAt = formatTime(item.createdAt)))
	evaluateList.value = res.data
}

onLoad(() => {
	getUserEvaluate()
})
</script>
<template>
	<view class="container">
		<view class="evaluate-list" v-if="evaluateList && evaluateList.length !== 0">
			<view class="evaluate-item" v-for="(item, index) in evaluateList" :key="item.evaluate_id">
				<view class="user">
					<view class="avatar">
						<up-image :src="item.user.avatar" width="40" height="40" shape="circle"></up-image>
					</view>
					<view class="info">
						<view class="username">{{ item.user.username }}</view>
						<view class="time">{{ item.createdAt }}发布评论</view>
					</view>
				</view>

				<view class="evaluate">
					<view class="rating">
						<up-rate active-color="#FA3534" readonly inactive-color="#b2b2b2" gutter="10" size="20" count="5" v-model="item.rating"></up-rate>
					</view>
					<view class="content">{{ item.comment ? item.comment : '用户未填写文字评论' }}</view>
				</view>

				<view class="order">
					<view class="name">{{ item.order.place_name }}</view>
					<view class="description">{{ item.order.description }}</view>
					<view class="detail">
						<view class="produce_type">{{ item.order.product_type }}</view>
						<view class="quantity">{{ item.order.quantity + (item.order.order_type === 'scenery' ? '张' : item.order.order_type === 'hotel' ? '间' : '套') }}</view>
					</view>
					<view class="date">
						出行日期:{{ item.order.order_type === 'hotel' ? item.order.travel_start_date + ' 至 ' + item.order.travel_end_date : item.order.travel_end_date }}
					</view>
					<view class="price-detail">
						<view class="money">￥</view>
						<view class="number">{{ item.order.total_amount }}</view>
					</view>
				</view>
			</view>
		</view>

		<up-empty v-else text="暂无点评" textSize="20" width="250" height="250" icon="https://leyouhui-1327374532.cos.ap-beijing.myqcloud.com/Static/comment.png"></up-empty>
	</view>
</template>

<style lang="scss" scoped>
.container {
	padding: 30rpx;

	.evaluate-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.evaluate-item {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 0;

			.user {
				height: 100rpx;
				display: flex;
				align-items: center;

				.info {
					display: flex;
					flex-direction: column;

					.time {
						color: #666666;
					}
				}
			}

			.content {
				padding: 30rpx 10rpx;
			}
		}

		.order {
			border-radius: 20rpx;
			background-color: #f7f8fa;
			color: #666666;
			padding: 20rpx;

			.name {
				font-size: 35rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
				color: #000000;
			}

			.detail {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
			}

			.price-detail {
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				color: #000000;

				.money {
					font-size: 35rpx;
				}

				.number {
					font-size: 45rpx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
